<template>
  <div class="right header-user">
    <el-dropdown @command="userDropdown">
      <div class="header-user">
        <span>{{username}}<i class="el-icon-arrow-down el-icon--right"></i></span>
        <ali-icon icon="iconyonghu"></ali-icon>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="out">
          <ali-icon icon="icontuichu"></ali-icon>
          退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {logout} from "@/api"
export default {
  computed: {
    ...mapState("auth", {
      username: "username"
    })
  },
  methods: {
    userDropdown(type) {
      switch (type) {
        case "out":
          this.$confirm("确定退出登录？", () => {
            // logout(() => {
            //   //删除token
            //   this.$storage.clearAll();
            //   this.$storage.clearAll(null,"localStorage");
            //   this.$router.replace({ name: "login" });
            // });
            //删除token
            this.$storage.clearAll();
            this.$storage.clearAll(null,"localStorage");
            this.$router.replace({ name: "login" });
          });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
